<template>
  <section v-if="data && data.id" class="note-item clearfix">
    <div class="pull-left recommend-container">
      <i-button @click="like(data)">
        <i-icon type="arrow-up-b" class="display-block"></i-icon>
        {{data.recommended}}
      </i-button>
    </div>
    <div class="note-item-body">
      <h2>
        <!-- <router-link class="title" :to="{name: 'note-detail', params: {id: data.id}}">{{data.title}}</router-link> -->
        <span class="title">{{data.title}}</span>
        <i-tag class="item-tag" v-for="(tag, index) in data.tags" :key="'note_' + data.id + '_' + index">{{tag}}</i-tag>
      </h2>
      <p class="margin-top-5 margin-bottom-10">
        {{data.createdBy.name}}  · <span>发布于 </span><date-span :value="data.createdAt"></date-span>
        <!-- <i-icon class="margin-left-10" type="android-bookmark"></i-icon> {{data.favored}} 收藏 -->
        <span v-if="!data.public" class="text-muted">  · 仅自己可见</span>
      </p>
      <p><span v-html="description"></span> <a href="javascript:;" @click="toggle()" v-if="memo != data.description">{{data.origin ? '收起' : '查看更多'}}</a></p>
      <p v-if="data.editable" class="margin-top-5">
        <a href="javascript:;" @click="edit()">编辑</a>
        <a href="javascript:;" @click="remove()" class="margin-left-5">删除</a>
      </p>
    </div>
  </section>
</template>

<script>
import DateSpan from '../data-span/Date'
import { mapActions } from 'vuex'
export default {
  components: {
    DateSpan
  },
  props: ['data'],
  data() {
    return {
      memo: null
    }
  },
  watch: {
    data(val) {
      this.setMemo(val.description)
    }
  },
  computed: {
    description() {
      return this.data && this.data.origin ? this.data.description : this.memo
    }
  },
  mounted() {
    this.setMemo(this.data && this.data.description)
  },
  methods: {
    ...mapActions({
      addEvent: 'addEvent',
      removeNote: 'removeNote'
    }),
    edit() {
      this.$emit('edit')
    },
    setMemo(description) {
      this.memo = description.replace(/<[^>]+>/g, '').substr(0, 100)
    },
    toggle() {
      this.data.origin = !this.data.origin
    },
    like(note) {
      const that = this
      this.addEvent({
        model: {
          id: note.id,
          type: 'RecommendNote'
        },
        callback(result) {
          if (result === 1) that.$Message.success('推荐笔记成功')
          else that.$Message.warning('已经推荐过了')
          note.recommended += result
        }
      })
    },
    remove() {
      const that = this
      that.$Modal.confirm({
        title: '确认',
        content: '确认删除笔记吗？',
        okText: '确定',
        cancelText: '取消',
        loading: true,
        onOk: () => {
          that.removeNote({
            id: this.data.id,
            callback() {
              that.$Modal.remove()
              that.$Message.success('删除笔记成功')
              that.$emit('search')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.note-item {
  padding: 10px 0;
  .note-item-body {
    background: white;
    margin-left: 40px;
    padding: 5px 10px;
  }
  .recommend-container {
    button {
      padding: 5px 0;
      width: 35px;
      background: white;
      &:hover,
      &.active {
        background: #39f;
        color: white;
      }
    }
  }
}
.title {
  font-size: 16px;
  font-weight: normal;
  color: #333;
  &:hover {
    // text-decoration: underline !important;
  }
}
</style>
